<template>
  <div class="yun-page">
    <div class='yun-linebg'>
        <yun-scale class='yun-line-block'>
            <div class='yun-block' >
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
        <yun-scale class='yun-line-block' scale='0.8'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
        <yun-scale class='yun-line-block' scale='0.6'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
         <yun-scale class='yun-line-block' scale='0.4'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
          <yun-scale class='yun-line-block' scale='0.2'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
    </div>
    <yun-code lang="vue" :code="code" > </yun-code>
    <table class='yun-table' cellspacing='0' style='width:100%;'>
    <thead>
        <tr>
          <th>属性</th>
          <th>类型</th>
          <th>默认值</th>
          <th>可选值</th>
          <th>说明</th>
        </tr>
    </thead>
    <tbody>
        <tr>
          <td>scale</td>
          <td>String/Number</td>
          <td>1</td>
          <td>-</td>
          <td>缩放比例</td>
        </tr>
    </tbody>
</table>
  </div>
</template>

<script>
import yunCode from "./yun-code.vue";
export default {
    components: { yunCode },
    data(){
        return {
            code:`
        <yun-scale class='yun-line-block' >
            <div class='yun-block' >
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
        <yun-scale class='yun-line-block' scale='0.8'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
        <yun-scale class='yun-line-block' scale='0.6'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
         <yun-scale class='yun-line-block' scale='0.4'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>
          <yun-scale class='yun-line-block' scale='0.2'>
            <div class='yun-block'>
                <img src="../img/animate.png" alt="">
                <h3> 招财进宝</h3>
            </div>
        </yun-scale>        
            `
        }
    }
};
</script>

<style lang='scss' scoped>
.yun-page {
//   background-image: linear-gradient(#889dfc44, #75ccff38);
  min-height: 300px;
  .yun-linebg{
       background-image: linear-gradient(#9264e6, #370bfc);
       padding:20px;
  }
  .yun-block{
      width:160px;
      text-align: center;
      border:1px solid red;
      padding:10px;
      img{
          width:100%;
          display: block;
      }
      h3{
          font-size:20px;
          margin-top:20px;
      }
  }
  .yun-line-block{
      display: inline-block;
  }
}
</style>